import React, { useEffect, useState } from 'react'
import { Menu } from 'antd'
import {
  HomeOutlined,
  UserOutlined,
  BarChartOutlined,
  CoffeeOutlined,
  // MenuOutlined,
  // ShopOutlined,
} from '@ant-design/icons'
import '../style/leftMenu.scss'
import { Link } from 'react-router-dom'
import withRouter from '../hooks/withRouter'

const items = [
  {
    label: (
      <Link to='/'>主页</Link>
    ),
    key: 'main',
    icon: <HomeOutlined />
  },
  {
    label: (
      <Link to='/goods'>商品管理</Link>
    ),
    key: 'goods',
    icon: <CoffeeOutlined />
  },
  // {
  //   label: (
  //     <Link to='/order'>订单管理</Link>
  //   ),
  //   key: 'order',
  //   icon: <MenuOutlined />
  // },
  // {
  //   label: (
  //     <Link to='/store'>库存管理</Link>
  //   ),
  //   key: 'store',
  //   icon: <ShopOutlined />
  // },
  {
    label: (
      <Link to='/data'>数据报表</Link>
    ),
    key: 'data',
    icon: <BarChartOutlined />
  },
  {
    label: (
      <Link to='/user'>用户管理</Link>
    ),
    key: 'user',
    icon: <UserOutlined />
  }
]

const LeftMenu = (props) => {
  const [current, setCurrent] = useState('main')

  useEffect(() => {
    const { pathname } = props.location
    const i = pathname.lastIndexOf('/')
    const k = pathname.substr(i+1)
    const obj = items.find(el => el.key === k)
    if (obj) {
      document.title = `${obj.label.props.children}-后台管理系统`
      setCurrent(k)
    } else {
      document.title = `后台管理系统`
      setCurrent('main')
    }
  }, [props.location])


  return (
    <Menu
      onSelect={e => setCurrent(e.key)}
      selectedKeys={[current]}
      mode="inline"
      theme="dark"
      items={items} />
  )
}

export default withRouter(LeftMenu)
